<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Insert title here</title>
    </head>
    <body>
        <h2>Changing the HTML Output Stream</h2>
        In JavaScript, document.write() can be used to write directly to the HTML output stream:
        <script>
            document.write(new Date());
        </script>
        <h2>Changing HTML Content</h2>
        <p>The easiest way to modify the content of an HTML element is by using the <b>innerHTML</b> property.</p>
        To change the content of an HTML element, use this syntax:
        <div>
            document.getElementById(<i>id</i>).innerHTML=<i>new HTML</i>
        </div>
        <h1 id="header">Old Header</h1>
        <script>
            var element = document.getElementById("header");
            element.innerHTML = "New Header";
        </script>
        <h2>Changing the Value of an Attribute</h2>
        To change the value of an HTML attribute, use this syntax:
        <div>
            document.getElementById(<i>id</i>).<i>attribute=new value</i>
        </div>
        <img id="image" src="smiley.gif">

        <button type="button" onclick="changeAttrib()">Change src Attribute</button>

        <script>
            var toggle = "smiley.gif";
            function changeAttrib() {
                if (toggle == "smiley.gif") {
                    document.getElementById("image").src = "landscape.jpg";
                    toggle = "landscape.jpg";
                } else {
                    document.getElementById("image").src = "smiley.gif";
                    toggle = "smiley.gif";
                }
            }
        </script>
        <h2>Changing HTML Style</h2>
        To change the style of an HTML element, use this syntax:
        <div>
            document.getElementById(<i>id</i>).style.<i>property</i>=<i>new style</i>
        </div>
        <p id="p2">Hello World!</p>
        <script>
            document.getElementById("p2").style.color="blue";
        </script>
    </body>
</html>